<template>
  <div>
    <div class="search-list mb-10">
      <!-- <el-button type="primary" @click="editCate('add', null)" size="small" plain><i
          class="el-icon-plus"></i>添加日反馈记录
      </el-button> -->
      <el-button type="danger" @click="delAll" size="small" plain :disabled="handleSelection.length === 0">
        <i class="el-icon-delete"></i>批量删除
      </el-button>
      <el-button @click="markAllRead" size="small" plain :disabled="handleSelection.length === 0">
        <i class="el-icon-view"></i>批量标记已读
      </el-button>
    </div>
    <div class="search-line">
      <el-select v-model="searchForm.section_id" placeholder="选择年段" size="small" @change="getClassList">
        <el-option :label="item.section_name" :value="item.id" v-for="(item, index) in sectionList" :key="index"></el-option>
      </el-select>
      <el-select v-model="searchForm.class_id" placeholder="选择班级" size="small" :disabled="!searchForm.section_id" @change="getStudentList">
        <el-option :label="item.class_name" :value="item.id" v-for="(item, index) in classList" :key="index"></el-option>
      </el-select>
      <el-select v-model="searchForm.student_id" placeholder="选择学生" size="small" :disabled="!searchForm.class_id" style="width: 150px;">
        <el-option :label="item.name" :value="item.id" v-for="(item, index) in studentList" :key="index"></el-option>
      </el-select>
      <el-select v-model="searchForm.is_read" placeholder="阅读状态" size="small">
        <el-option label="全部" :value="''"></el-option>
        <el-option label="未读" :value="0"></el-option>
        <el-option label="已读" :value="1"></el-option>
      </el-select>
      <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
      ></el-date-picker>
      <el-button type="primary" @click="searchFn" size="small">搜索</el-button>
      <el-button @click="resetSearch" size="small">重置</el-button>
    </div>
    <div class="table-line-body mt-10 yangTable">
      <el-table
          :data="arryList"
          row-key="id"
          ref="table"
          @selection-change="handleSelectionChange"
          style="width: 100%"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column prop="student_name" label="学生" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="class_name" label="班级" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="section_name" label="年段" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="user_name" label="提交人" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="is_read" label="阅读状态" width="100" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.is_read === 0" type="danger">未读</el-tag>
            <el-tag v-else type="success">已读</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="160" align="center"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="editCate('edit', scope.row)"
            >查看详情
            </el-button>
            <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="deletefn(scope.row)"
            >删除
            </el-button>
            <el-button
                v-if="scope.row.is_read === 0"
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="markRead(scope.row.id)"
            >标记已读
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-line">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.pageindex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
        ></el-pagination>
      </div>
    </div>
    <div class="height40"></div>
    <feedbackRecordForm :visible.sync="patrolVisible" :optionData="optionData" @InitFn="InitFn"
            :optionType="optionType" :feedbackCateList="feedbackCateList"></feedbackRecordForm>
  </div>
</template>

<script>
import feedbackRecordForm from "./feedbackRecordForm";
import {DailyFeedbackIndex, DailyFeedbackDelete, DailyFeedbackMarkRead, DailyFeedbackCateIndex, DailyFeedbackDetail} from "@/api/admin/dailyFeedback";
import {sectionIndex, classIndex} from "@/api/admin/class";
import {classesStudent} from "@/api/admin/student"

export default {
  components: {
    feedbackRecordForm
  },
  data() {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      patrolVisible: false,
      // 搜索
      searchForm: {
        section_id: '',
        class_id: '',
        student_id: '',
        student_name: '',
        is_read: '',
        start_time: '',
        end_time: ''
      },
      // 学生列表
      studentList: [],
      dateRange: [],
      optionData: null,
      optionType: '',
      handleSelection: [],
      // 分页
      page: {
        pageindex: 1,
        pagesize: 20,
        total: 0
      },
      sectionList: [],
      classList: [],
      feedbackCateList: []
    }
  },
  watch: {
    searchForm: {
      handler(newVal, oldVal) {
        if (newVal.section_id !== oldVal.section_id) {
          this.searchForm.class_id = '';
          this.getClassList();
        }
      },
      deep: true
    }
  },
  created() {
    this.InitFn();
    this.getSectionList();
    this.getFeedbackCateList();
  },
  methods: {
    // 初始化
    async InitFn() {
      let params = {
        p: this.page.pageindex,
        pagesize: this.page.pagesize,
        ...this.searchForm
      };
      
      if (this.dateRange && this.dateRange.length === 2) {
        params.start_time = this.dateRange[0];
        params.end_time = this.dateRange[1];
      }
      
      DailyFeedbackIndex(params).then(res => {
        if (!res.code) {
          this.arryList = res.list.data || [];
          this.page.total = res.list.total || 0;
        }
      })
    },
    
    // 获取年段列表
    getSectionList() {
      sectionIndex().then(res => {
        console.log(res,'年段列表')
        if (!res.code) {
          this.sectionList = res.list.data || [];
        }
      });
    },
    
    // 获取班级列表
    getClassList() {
      if (this.searchForm.section_id) {
        classIndex({section_id: this.searchForm.section_id}).then(res => {
          if (!res.code) {
            this.classList = res.list.data || [];
          }
        });
      }
    },

    // 获取学生列表
    getStudentList() {
      if (this.searchForm.class_id) {
        classesStudent({class_id: this.searchForm.class_id}).then(res => {
          if (!res.code) {
            this.studentList = res.list || [];
          }
        });
      }
    },
    
    // 获取反馈分类列表
    getFeedbackCateList() {
      DailyFeedbackCateIndex({p: 0}).then(res => {
        if (!res.code) {
          this.feedbackCateList = this.$handleTree(res.list, 'id', 'parent_id');
        }
      })
    },
    
    // 搜索
    searchFn() {
      this.page.pageindex = 1;
      this.InitFn();
    },
    
    // 重置搜索
    resetSearch() {
      this.searchForm = {
        section_id: '',
        class_id: '',
        student_id: '',
        student_name: '',
        is_read: '',
        start_time: '',
        end_time: ''
      };
      this.studentList = [];
      this.dateRange = [];
      this.page.pageindex = 1;
      this.InitFn();
    },
    
    // 分页
    handleSizeChange(val) {
      this.page.pagesize = val;
      this.InitFn();
    },
    
    handleCurrentChange(val) {
      this.page.pageindex = val;
      this.InitFn();
    },
    
    handleSelectionChange(val) {
      this.handleSelection = val;
    },
    
    // 批量删除
    delAll() {
      if (this.handleSelection.length === 0) {
        this.$message.warning('请选择要删除的数据');
        return;
      }
      const ids = this.handleSelection.map(item => item.id);
      this.$confirm(`确认删除选中的 ${ids.length} 条数据, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(ids.join(','));
      }).catch(() => {
        // 用户取消操作
      });
    },
    
    // 批量标记已读
    markAllRead() {
      if (this.handleSelection.length === 0) {
        this.$message.warning('请选择要标记已读的数据');
        return;
      }
      const ids = this.handleSelection.map(item => item.id);
      this.$confirm(`确认将选中的 ${ids.length} 条数据标记为已读, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.markReadRespon(ids.join(','));
      }).catch(() => {
        // 用户取消操作
      });
    },
    
    // 单行删除
    deletefn(row) {
      this.$confirm(`确认删除【${row.student_name}】的日反馈记录, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(row.id);
      }).catch(() => {
        // 用户取消操作
      });
    },
    
    // 标记已读
    markRead(id) {
      this.markReadRespon(id);
    },
    
    // 调用删除API
    async detelRespon(id) {
      DailyFeedbackDelete({id: id}).then(res => {
        if (!res.code) {
          this.$message.success(res.msg);
          this.InitFn();
        }
      });
    },
    
    // 调用标记已读API
    async markReadRespon(id) {
      DailyFeedbackMarkRead({id: id}).then(res => {
        if (!res.code) {
          this.$message.success(res.msg);
          this.InitFn();
        }
      });
    },
    
    // 查看详情
    editCate(type, row) {
      this.optionType = type;
      // 使用专用的详情接口获取数据
      DailyFeedbackDetail({id: row.id}).then(res => {
        console.log(res,'详情数据')
        if (!res.code && res.vo) {
          this.optionData = res.vo;
          this.patrolVisible = true;
        } else {
          this.$message.error('获取详情失败');
        }
      }).catch(err => {
        console.error('获取详情失败:', err);
        this.$message.error('获取详情失败');
      });
    }
  },
  mounted() {
  },
}
</script>
<style>
.search-line {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.pagination-line {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
</style>